<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素操作2</title>
    <style>
        /* div2的属性操作 */
        .style2{
            background-color: beige;
            width: 600px;
            height: 500px;
        }

        .myStyle{
            background-color:aqua;
            width: 350px;
            height: 350px;
        }

        .myStyle img{
            width: 200px;
            height: 270px;
        }
        /* div3的属性操作 */

        .style3{
            background-color: chartreuse;
            width: 600px;
            height: 600px;
        }
        
        .myStyle3 img{
            width: 100px;
            height: 100px;
        }
        
        .myFont1{
            color: blueviolet;
        }
        .myFont2{
            font-weight: 400;
            font-size: 40px;
        }
      
        .myFont3{
            font-style: italic;
        }

        .myFont4 img{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="div1" style="background-color: antiquewhite;">
        <h3>这是第一个div</h3>
        <p>JS 对图片的操作</p>
        <img src="../../Images/image1.png">
    </div>

    <div id="div2" class="style2" >
        <h3>这是第二个div</h3>
        <p>JS 通过class名进行多属性操作</p>
        <img src="../../Images/image1.png">
    </div>

    <!-- 有两个class的样式设置，可以在class里直接加入新的样式设置class名 -->
    <div id="div3" class="style3 myStyle3" >
        <h3>这是第二个div</h3>
        <p>JS 通过classList在原有基础上进行属性设置</p>
        <img src="../../Images/imge3.png">
    </div>


    <script>
       //JS 对图片的操作
       let img = document.getElementsByTagName("img")[0]
       //相对路径 ../返回父级 再上一级就再 ../
       img.setAttribute("src","../../Images/image2.png")
       img.style.width = "100px"
       img.style.height = "200px"
       img.style.border = "2px red solid"


       //JS 通过class名进行多属性操作
       let div2 = document.getElementById("div2")
       //将div2的 .style1 属性改为 .myStyle的属性样式
       //注意：改变后 如果新的Class属性设置中没有设置的属性不会延用原来的
       div2.className ="myStyle"


       //JS 通过classList进行多class样式修改
       let div3 = document.getElementById("div3")
       //①在原样式上添加样式;若现有的和原有的冲突，以更改后的为主
       div3.classList.add("myFont1","myFont2","myFont3")
       //②移除样式;会在上面添加之后的结果上进行移除
       div3.classList.remove("myFont3") //移除字体斜体
       //③检查是否包含指定类名样式;在现在元素拥有的所有设置样式基础上检查
       let flag = div3.classList.contains("myFont1")
       console.log(flag)
       //④切换类名（存在则移除，不存在则添加）
       div3.classList.toggle("myFont1") //去除字体颜色
       div3.classList.toggle("myFont4") //设置图片长宽
    </script>
</body>
</html>